<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

</body>
<script type="module">
    import * as THREE from "three";
    import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

    const loader = new GLTFLoader();
    const clock = new THREE.Clock();

    //创建场景
    const scene = new THREE.Scene();
    // 添加环境光
    const ambientLight = new THREE.AmbientLight('#ffffff', 5);
    scene.add(ambientLight);

    // const size = 10;
    // const divisions = 10;

    // const gridHelper = new THREE.GridHelper(size, divisions, '#fc3f80', '#07c160');
    // scene.add(gridHelper);

    const dirLight = new THREE.DirectionalLight(0xFFFFFF, 5);
    // const helper = new THREE.DirectionalLightHelper(dirLight, 5);
    // dirLight.position.set(0, 2, 0);
    scene.add(dirLight);

    //创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    camera.position.set(0, 0, 30)
    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 添加镜头轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);

    //第一种实现方式
    //创建立方体
    const images = [
        '../images/3Dhouse/house_left.jpg',
        '../images/3Dhouse/house_right.jpg',
        '../images/3Dhouse/house_top.jpg',
        '../images/3Dhouse/house_bottom.jpg',
        '../images/3Dhouse/house_front.jpg',
        '../images/3Dhouse/house_back.jpg',
    ]
    let materials = [];
    const textureLoader = new THREE.TextureLoader();
    images.forEach((image) => {
        const texture = textureLoader.load(image);
        let material = new THREE.MeshBasicMaterial({
            map: texture
        })
        materials.push(material)
    })

    const Mesh = new THREE.Mesh(
        new THREE.BoxGeometry(40, 40, 40),
        materials
    )
    Mesh.geometry.scale(12,12,-12)
    scene.add(Mesh)


    // //第二种方式
    // //创建球体
    // const texture = new THREE.TextureLoader().load('../images/3Dhouse/sence.png');
    // const geometry = new THREE.SphereGeometry(16, 32, 32);
    // const material = new THREE.MeshBasicMaterial({ map: texture });
    // const sphere = new THREE.Mesh(geometry, material);
    // sphere.geometry.scale(12,12,-12)
    // scene.add(sphere);

    //渲染场景
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera)
    }
    animate()

</script>

</html>